<template>
  <div class="base-deploy-box">
    <div class="base-deploy-tips">
      <div>Tips: 一旦设置完毕，会在下次报告中生效。</div>
      <div>
        <img v-show="!ifEdit" src="/img/left-menu/edit-blue.png" alt="" @click="showEdit">
      </div>
    </div>
    <div class="base-deploy-list">
      <ul>
        <li
          v-for=" (item, i) in deployList "
          :key="i"
        >
          <div>
            {{ item.tit }}:
          </div>
          <div class="deploy-input">
            <el-input-number
              v-if="ifEdit"
              v-model="configObj[item.key]"
              controls-position="right"
              @change="showWarning"
              :precision="0"
              :step="1"
              :min="1"
              :max="10"
            ></el-input-number>
            <div v-else > {{ configObj[item.key] }} </div>
            <span>%</span>
          </div>



        </li>
      </ul>
    </div>
    <div class="base-deploy-btn" v-show="ifEdit">
      <el-button @click="getConfig">取消</el-button>
      <el-button  type="primary" @click="sendBaseDeploy" :loading="enterLoding">确定</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'baseDeploy',
  data() {
    return {
      enterLoding: false,
      ifEdit: false,
      deployList: [
        { tit: '用户占比低-全市均值', key: 'microUserRatio', tips: '主要对全市网格各运营商'  },
        { tit: '高用户份额微格', key: 'microUserHighRatio' , tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格弱覆盖区域4G分析（弱于友商）', key: 'gridCoverageRatio', tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格弱覆盖区域5G分析（弱于友商）', key: 'gridCoverageRatio5G', tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格质差区域4G分析（弱于友商）', key: 'gridQualityRatio', tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格质差区域5G分析（弱于友商）', key: 'gridQualityRatio5G', tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格弱覆盖区域4G分析（优于友商）', key: 'gridCoverageHighRatio', tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格弱覆盖区域5G分析（优于友商）', key: 'gridCoverageHighRatio5G' , tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格质差区域4G分析（优于友商）', key: 'gridQualityHighRatio', tips: '主要对全市网格各运营商'  },
        { tit: '5*5栅格质差区域5G分析（优于友商）', key: 'gridQualityHighRatio5G', tips: '主要对全市网格各运营商'  },
        { tit: '用户占比高&覆盖差', key: 'sceneUserCovHighUserRatio', tips: '主要对全市网格各运营商'  },
        { tit: '用户占比低&覆盖好', key: 'sceneUserCovLowUserRatio', tips: '主要对全市网格各运营商'  },
        { tit: '用户占比低&覆盖好', key: 'sceneUserCovHighCovRatio', tips: '主要对全市网格各运营商'  },
        { tit: '用户占比高&覆盖差', key: 'sceneUserCovLowCovRatio', tips: '主要对全市网格各运营商'  },
        { tit: '覆盖异常微格-4G', key: 'microCoverageRatio', tips: '主要对全市网格各运营商'  },
        { tit: '覆盖异常微格-5G', key: 'microCoverageRatio5G', tips: '主要对全市网格各运营商'  },
        { tit: '质量异常微格-4G', key: 'microQualityRatio', tips: '主要对全市网格各运营商'  },
        { tit: '质量异常微格-5G', key: 'microQualityRatio5G', tips: '主要对全市网格各运营商'  },
      ],

      configObj: {},

      formList: [],

    }
  },
  computed: {
    ...mapGetters(['userInfo' ])
  },
  mounted() {
    // this.formList = JSON.parse(JSON.stringify(this.deployList));
    this.getConfig();
  },
  methods: {
    getConfig() {
      let params = {
        cityId: this.userInfo.cityId,
        mnc: this.userInfo.mnc,
      }
      this.api.getCityMncConfig(params)
          .then( res => {
            if(res.code == 1) {
              this.configObj = res.data;

              this.ifEdit = false;
            }
          })
    },
    showEdit() {
      // this.formList = JSON.parse(JSON.stringify(this.deployList));
      this.ifEdit = true;
    },
    showWarning(e) {
      // alert(e);
    },
    sendBaseDeploy() {
      this.enterLoding = true;
      console.log(this.configObj);
      this.api.updateCityMncConfig(this.configObj)
          .then( res => {
            if( res.code == 1 ) {
              this.enterLoding = false;
              this.getConfig();
            }
          } )
    },
  }
}
</script>

<style lang="scss" scoped>
.base-deploy-box {
  background-color: #fff;
  padding: 10px 20px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  .base-deploy-tips {
    padding: 5px;
    height: 42px;
    background-color: #ffffe1;
    font-size: 18px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    > div > img {
      cursor: pointer;
    }
  }

  .base-deploy-list {
    flex: 1;
    margin: 20px 0;
    padding: 0 20px;
    max-height: calc(100% - 138px);
    overflow-y: auto;

    >ul >li {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      font-size: 15px;
      > div {
        display: flex;
        flex: 1;
        align-items: center;
      }
      > div:nth-child(1) {
        justify-content: flex-end;
        margin-right: 10px;
      }

      .deploy-input {
        .el-input {
          width: 100px;
        }
        >span {
          margin-left: 10px;
        }
      }

    }

  }

  .base-deploy-btn {
    padding: 10px;
    text-align: center;
  }

}

</style>
